var dataArray=[
    {name:"SWMM",link:"",id:"swmm"},
    {name:"BDS",link:"",id:"bds"},
    {name:"Ecomsed",link:"",id:"ecomsed"},
    {name:"Telemac2dSWMM",link:"",id:"telemac2dswmm"},
    // {name:"CEQUEAU",link:"http://www1.ete.inrs.ca/activites/modeles/cequeau/ainformation.htm#Introduction"},
    // {name:"C2VGSM",link:""},
    // {name:"IWFM",link:""},
    // {name:"KINEROS2",link:"https://www.tucson.ars.ag.gov/kineros/Docs/Doc.html"},
    // {name:"MIKE SHE",link:"https://www.mikepoweredbydhi.com/products/mike-she"},
    // {name:"TOPIKAPI",link:"http://www.progea.net/prodotti.php?c=Servizi&p=Trattamento_dati_e_RADAR"},
    // {name:"HSPF",link:"https://www.epa.gov/ceam/hydrological-simulation-program-fortran-hspf"}
];

var numOfModelPerRow=5;

$(document).ready(function () {

    /**
     * 目录树中Data条目的点击事件，生成Data列表
     */
    $("#sidebar-data").click(function () {

        var modelList=document.getElementById("data-list");
        modelList.innerHTML="";
        var rowNum=Math.ceil(dataArray.length/numOfModelPerRow);
        for (var i=0;i<rowNum;i++) //行
        {
            var row=document.createElement("div");
            row.setAttribute("class","row");

            for (var j=0;j<numOfModelPerRow;j++)  //每行5个
            {
                if ((i*numOfModelPerRow+j)<dataArray.length)
                {
                    var model=document.createElement("div");
                    model.setAttribute("class","col-md-55");

                    var modelThumbnail=document.createElement("div");
                    modelThumbnail.setAttribute("class","thumbnail");


                    var a=document.createElement("a");
                    a.setAttribute("href",dataArray[i*numOfModelPerRow+j].link);//每个模型的链接
                    a.setAttribute("target","_blank");  //target 属性规定在何处打开链接文档。_blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。
                    var picPanel=document.createElement("div");
                    picPanel.setAttribute("class","image view view-first");
                    if(dataArray[i*numOfModelPerRow+j].id!=null)
                    {
                        picPanel.setAttribute("div_id",dataArray[i*numOfModelPerRow+j].id);
                    }


                    var img=document.createElement("img");
                    img.setAttribute("src","images/model/thumb.png");
                    var mask=document.createElement("div");
                    mask.setAttribute("class","mask");
                    var p=document.createElement("p");
                    p.innerText=dataArray[i*numOfModelPerRow+j].name;
                    mask.appendChild(p);
                    picPanel.appendChild(img);
                    picPanel.appendChild(mask);
                    a.appendChild(picPanel);
                    modelThumbnail.appendChild(a);

                    var caption=document.createElement("div");
                    caption.setAttribute("class","caption");
                    var p2=document.createElement("p");
                    p2.innerText=dataArray[i*numOfModelPerRow+j].name;
                    caption.appendChild(p2);
                    modelThumbnail.appendChild(caption);

                    model.appendChild(modelThumbnail);
                    row.appendChild(model);
                }
            }
            modelList.appendChild(row);
        }

        for (var i=2;i<rowNum;i++)
        {
            $("#distributed-modelList .row").eq(i).hide();
        }

        // $("#parametric-modelList .row").hide();  //层级选择器，选择所有class包含"modelPanel"中的class包含"info"中的class包含"row"字符串的元素
        // $(".modelList .row").eq(1).show();  //eq() 选择器选取带有指定 index 值的元素。此两句为默认只显示前两行的模型
        // $(".modelList .row").eq(2).hide();
        $(".modelPanel .expandBtn").html("Expand&nbsp; <i class=\"fa fa-caret-down\"></i>");//给Expand赋以内容
        $(".modelPanel .expand").css("display","block");
    });

    var url="http://223.2.36.53:8081/Hydro/ModelDataDownloadServlet";
    $("#data-list").on('click','.view',function () {
        var dataID=this.getAttribute("div_id");
        console.log(dataID);
        var form = $("<form>");
        form.attr("style","display:none");
        form.attr("method","post");
        form.attr("action",url);
        $(this).append(form);//将表单放置在web中

        //在表单中添加input标签来传递参数
        //如有多个参数可添加多个input标签
        var input1=$("<input>");
        input1.attr("type","hidden");//设置为隐藏域
        input1.attr("name","dataID");//设置参数名称
        input1.attr("value",dataID);//设置参数值
        form.append(input1);//添加到表单中

        form.submit();//表单提交

        //发送修改好的数据到后台
        // $.ajax({
        //     type:"post",
        //     url:"/Hydro/InpDownloadServlet",
        //     dataType:'text',
        //     data:{dataID:dataID},
        //     async:true,
        //     success:function (data) {
        //         var formData=new FormData(data);
        //
        //         console.log(data);
        //     },
        //     error:function () {
        //         console.log("error");
        //     }
        // });
    });



    $(".thumbnail").click(function () {
        var dataID=this.attr("id");
        console.log(dataID);
    });

});